/*
美化滑动控件：
1.去除系统默认样式
2.给滑动轨道（track）添加样式
3.给滑块（thumb）添加样式
4.根据滑块位置填充滚动条
5.兼容多浏览器
*/

/*去除系统默认样式*/
input[type="range"] {
	width: 100%;
	background: transparent; /*Chrome会显示白色，所以设置位透明*/
	appearance: none;
	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none; /* Safari 和 Chrome */
}

input[type="range"]::-webkit-slider-thumb {
	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none; /* Safari 和 Chrome */
}

input[type="range"]:focus {
	outline: none;	/*去除边框*/
}

/*给滑动轨道（track）添加自定义样式*/
input[type="range"]::-ms-track {
	width: 100%;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

/*给滑块（thumb）添加样式*/
/* Chrome / Blink */
input[type="range"]::-webkit-slider-thumb {
	height: 27px;
	width: 16px;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	margin-top: -10px;	/*Chrome中需要指定边距，firefox和ie中是自动的*/
	border: 1px solid #000;
	box-shadow: 1px 1px 1px #000 0 0 1px #0d0d0d;
}

/* FireFox */
input[type="range"]::-moz-range-thumb {
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
	border: 1px solid #000000;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

/* IE浏览器 */
input[type="range"]::-ms-thumb {
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
	border: 1px solid #000000;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

/* 根据滑块所在位置填充进度条 */
input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	background: #3071a9;
	border-radius: 1.3px;
	border: 0.2px solid #010101;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type="range"]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type="range"]:focus::-ms-fill-lower {
  background: #3071a9;
}

input[type="range"]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type="range"]:focus::-ms-fill-upper {
  background: #367ebd;
}